<!--瀑布流-->
<template>
<div class="waterfall-flow">
    <div class="flow-main">
        <div v-for="(item,index) in data" :key="index" class="flow-item">
            <img :src="item.url"/>
            <h1>{{item.name}}</h1>
        </div>
    </div>
    <div class="flow-more">
        <span v-if="moreloading">加载中...</span>
        <span @click="loadMore" v-else>加载更多</span>
    </div>
</div>
</template>

<script setup>
import { ref, reactive } from 'vue';
const data = reactive([
        { id: 1, name: 'item1',url:'https://inews.gtimg.com/om_bt/OfeOoA0HB5tqCi_wE5ZRKCwIRFgbSSLdW3XPS631VN4ZgAA/1000' },
    { id: 2, name: 'item2',url:'https://inews.gtimg.com/om_bt/OM5qjLvjdaBB-_gRMmYWeuN2XDZdAIjut6jHwBnRMZzLcAA/641' },
    { id: 3, name: 'item3',url:'https://img2.baidu.com/it/u=1195773901,4039087122&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750' },
]);
const imgList = reactive([
        'https://img0.baidu.com/it/u=3651328576,1328321898&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=750' ,
        'https://img2.baidu.com/it/u=49755213,2590496265&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500' ,
        'https://img2.baidu.com/it/u=1195773901,4039087122&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750',
        'https://ww4.sinaimg.cn/mw690/abe2006dly1hsli3pcomcj20u0140dly.jpg',
        'https://inews.gtimg.com/om_bt/OfeOoA0HB5tqCi_wE5ZRKCwIRFgbSSLdW3XPS631VN4ZgAA/1000',
        'https://inews.gtimg.com/om_bt/OM5qjLvjdaBB-_gRMmYWeuN2XDZdAIjut6jHwBnRMZzLcAA/641',
        'https://ww4.sinaimg.cn/mw690/0070NSSfgy1ht8551s5foj30u00trn0r.jpg'
]);
const moreloading = ref(false);
const loadMore = () => {
    moreloading.value = true;
    setTimeout(() => {
        for(let i = 0; i < 10; i++) {
            // 从imgList 中随机取一个
            const randomIndex = Math.floor(Math.random() * imgList.length);
            data.push({
                id:data.length+1,
                name:'item'+(data.length+1),
                url:imgList[randomIndex]
            });
        }
        moreloading.value = false;
    }, 1000);
};
</script>

<style scoped lang="scss">
.waterfall-flow{
    .flow-main{
        //display: grid;
        //grid-template-columns: repeat(3,1fr);
        column-count: 3; /* 假设我们想要3列瀑布流 */
        gap: 10px;
        .flow-item{
            //break-inside: avoid-column; /* 避免在列内断开 */
            break-inside: avoid; /* 避免内容分布在多列中 */
            box-sizing: border-box; /* 包括边框和内边距在元素宽度内 */
            img{
                width: 100%;
            }
        }
    }
}
</style>
